<template>
	<view class="content" v-if="show==1">
		<view class="main">
			<view class="info">
				<view class="info2"><text>*</text>工作分类</view>
				<view class="info3">
					<picker mode ="multiSelector" @columnchange="catel" @change="xue" :value="cy" :range="xueke">
						<text class="zhuzhu" v-if="kecheng.cid==0">请选择工作分类</text>
						<text v-else>{{cate[cy[0]].title}}-{{cate[cy[0]].cate[cy[1]]}}</text>
					</picker>
				</view>
				<image src="../../static/xiaxia.png" mode="aspectFill" class="xiaxia"></image>
			</view>
			
			<view class="info">
				<view class="info2"><text>*</text>服务分类</view>
				<view class="info3">
					<picker @change="fwcate2" :value="fcindex" :range="fwcate.fc">
						<text class="zhuzhu" v-if="kecheng.fw_id==0">请选择服务分类</text>
						<text v-else>{{fwcate.fc[fcindex]}}</text>
					</picker>
				</view>
				<image src="../../static/xiaxia.png" mode="aspectFill" class="xiaxia"></image>
			</view>
			<view class="info">
				<view class="info2"><text>*</text>服务时长</view>
				<view class="info3">
					<picker @change="nianji2" :value="njindex" :range="nianji.nj">
						<text class="zhuzhu" v-if="kecheng.nid==-1">请选择服务时长</text>
						<text v-else>{{nianji.nj[njindex]}}</text>
					</picker>
				</view>
				<image src="../../static/xiaxia.png" mode="aspectFill" class="xiaxia"></image>
			</view>
			<!--<view class="info">
				<view class="info2"><text>*</text>地址</view>
				<view class="info3">
					<input type="text" @click="addr" :value="kecheng.address" placeholder-class="zhuzhu" placeholder="请选择您的地址" disabled="true" />
				</view>
			</view>-->
			<view class="info">
				<view class="info2"><text>*</text>总费用</view>
				<view class="info3">
					<input type="digit" placeholder-class="zhuzhu" @input="price2" placeholder="请输入服务总费用" />
				</view>
			</view>
			<view class="info5">
				<view class="info6">服务关键词</view>
				<view class="info7">
					<textarea placeholder-class="zhuzhu" @input="title" placeholder="您可以输入产品优势或关键词，方便用户搜索" />
				</view>
			</view>
			<view class="info5">
				<view class="info6">图片展示</view>
				<view class="info7" style="padding-top: 6px;">
					<view class="fengcai" v-for="(img,index) in kecheng.images">
					<image class="fcimg" :src="img" mode="aspectFill"/>
					<image class="fccha" @click="delimg" :data-index="index" src="../../static/images/cha.png" mode="aspectFill"/>
					</view>
					<view class="fengcai" @click="fc">
					<image class="fcimg" src="../../static/cs.png" mode="aspectFill"/>
					</view>
				</view>
			</view>
			<view style="width:100%;height:50px;"></view>
			<view class="info4" @click="baocun">
				立即发布
			</view>
		</view>
	</view>
</template>

<script>
	var app=getApp();
	export default {
		data() {
			return {
				show:0,
				cid:0,
				uid:0,
				nianji:[],
				njindex:0,
				fwcate:[],
				fcindex:0,
				xingshi:[],
				xsindex:0,
				sheng:[],
				sindex:0,
				xueke:[],
				cate:[],
				cy:[],
				price:[],
				kecheng:[]
			}
		},
		onLoad(op) {
			const uid = uni.getStorageSync('uid');
			if(app.isBlank(uid)==true){
				app.error_msg("请先登录");
			}
			if(app.isBlank(op.cid)==false){
				this.cid=op.cid;
			}
			this.uid=uid;
			this.getdata();
		},
		methods: {
			getdata(){
				var that=this;
				uni.showLoading({
				    title: '数据加载中'
				});
				uni.request({
				    url: app.globalData.url+"laoshi/kcadd",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {uid:that.uid,cid:that.cid},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							app.error_msg(res.data.msg);
						}
						
						that.kecheng=res.data.data.kecheng
						that.xueke=res.data.data.xueke
						that.cate=res.data.data.cate
						that.cy=res.data.data.index
						that.nianji=res.data.data.nianji
						that.fwcate=res.data.data.fwcate
						that.xingshi=res.data.data.xingshi
						that.sheng=res.data.data.sheng
						that.price=res.data.data.price
						that.show=1;
				    }
				});
			},
			baocun(){
				var that=this;
				
				if(this.kecheng.cid==0){
					uni.showToast({
					    title: "请选择装修分类",
						icon:'none',
					    duration: 1500
					});
					return false;
				}
				
				if(this.kecheng.fw_id==0){
					uni.showToast({
					    title: "请选择服务分类",
						icon:'none',
					    duration: 1500
					});
					return false;
				}
				if(this.kecheng.nid==-1){
					uni.showToast({
					    title: "请选择服务时长",
						icon:'none',
					    duration: 1500
					});
					return false;
				}
				/*if(app.isBlank(this.kecheng.address)==true){
					uni.showToast({
					    title: "请选择地址",
						icon:'none',
					    duration: 1500
					});
					return false;
				}*/
				
				if(app.isBlank(this.kecheng.price)==true){
					uni.showToast({
					    title: "请填写总费用",
						icon:'none',
					    duration: 1500
					});
					return false;
				}
				if(this.kecheng.price<=this.price.min){
					uni.showToast({
					    title: "总费用不能低于"+this.price.min+"元",
						icon:'none',
					    duration: 1500
					});
					return false;
				}
				
				if(app.isBlank(this.kecheng.images)==false){
					this.kecheng.imgs=this.kecheng.images.toString();
				}else{
					this.kecheng.imgs='';
				}
				var u=JSON.stringify(that.kecheng);
				u=JSON.parse(u)
				u.uid=that.uid;
				uni.showLoading({
				    title: '提交中..'
				});
				uni.request({
				    url: app.globalData.url+"laoshi/dokcadd",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: u,
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 1500
							});
							return false;
						}
						uni.showToast({
						    title: res.data.msg,
						    duration: 1000
						});
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							});
						},1000)
					}
				})
			},
			fc(){
				var that=this;
				uni.showActionSheet({
				    itemList: ['使用相机', '访问相册'],
				    success: function (res) {
						that.fcimg(res.tapIndex);
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
			fcimg(t){
				var that=this;
				if(t==0){
					var lx=["camera"];
				}else{
					var lx=["album"];
				}
				uni.chooseImage({
				    count: 9,
					sizeType:"compressed",
					sourceType:lx,
				    success: function (res) {
				        const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
						    title: '上传中'
						});
						for(var i=0;i<tempFilePaths.length;i++){
							uni.uploadFile({
								url: app.globalData.url+'upload/uploadImg',
								filePath: tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									uni.hideLoading();
									var str=JSON.parse(uploadFileRes.data)
									if(str.code!=1){
										uni.showToast({
											title: res.data.msg,
											icon:'none',
											duration: 1500
										});
										return false;
									}
									uni.showToast({
										title: str.msg,
										icon:'success',
										duration: 1000
									});
									var img=new Array();
									img[0]=str.data.image;
									that.kecheng.images=that.kecheng.images.concat(img);
								}
							});
						}
				    },
					fail(e){
						console.log(e);
					}
				});
			},
			addr(){
				var that=this;
				uni.chooseLocation({
				    success: function (res) {
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
						that.kecheng.address=res.address;
						that.kecheng.lng=res.longitude;
						that.kecheng.lat=res.latitude;
				    },
					fail(e){
						console.log(e);
					}
				});
			},
			nianji2: function(e) {
				this.njindex= e.target.value
				this.kecheng.nid = this.nianji.nianji[e.target.value].id
			},
			xingshi2: function(e) {
				this.xsindex= e.target.value
				this.kecheng.xingshi = this.xingshi.xingshi[e.target.value].id
			},
			fwcate2: function(e) {
				this.fcindex= e.target.value
				this.kecheng.fw_id = this.fwcate.fwcate[e.target.value].id
			},
			sheng2: function(e) {
				this.sindex=e.target.value
				this.kecheng.sheng = this.sheng[e.target.value]
			},
			xue: function(e) {
				this.cy=e.detail.value;
				this.kecheng.cid=this.cate[this.cy[0]].id
				this.kecheng.cid2=this.cate[this.cy[0]].cate2[this.cy[1]].id
			},
			catel: function(e) {
				if(e.detail.column==0){
					this.xueke[1]=this.cate[e.detail.value].cate;
					
					this.$forceUpdate();
				}
			},
			delimg(e){
				var index=e.currentTarget.dataset.index;
				this.kecheng.images.splice(index,1);
			},
			title: function(event) {
			    this.kecheng.title = event.target.value
			},
			price2: function(event) {
			    this.kecheng.price = event.target.value
			}
		}
	}
</script>

<style>
	
	.paytype3{width:100%;height:40px;flex:1;}
	.paytype2{width:80px;height:40px;line-height: 40px;margin-right: 5px;}
	.paytype{width:94%;padding: 0px 3%;display: flex;border-bottom: 1px rgb(245, 245, 245) solid;}
	
	.geng8{width:80%;height:35px;line-height: 35px;background-color: #05c160;margin: 0 auto;color: #fff;text-align: center;border-radius: 3px;margin-top: 20px;}
	.geng7{width:30%;height:30px;line-height: 30px;text-align: center;background-color: #05c160;color:#fff;border-radius: 3px;margin-top: 5px;float: right;font-size: 0.75rem;margin-left: 5px;}
	.geng6 input{width:60%;height:40px;float: left;font-size: 0.875rem;}
	.geng6{width:100%;height:40px;flex:1;}
	.geng5{width:80px;height:40px;line-height: 40px;}
	.geng4{width:94%;padding: 0px 3%;height:40px;border-bottom: 1px rgb(245, 245, 245) solid;display: flex;}
	.geng3 image{width:20px;height:20px;float: right;margin-top: 10px;}
	.geng3 text{font-weight: 550;}
	.geng3{width:94%;padding: 0px 3%;height:40px;line-height: 40px;border-bottom: 1px rgb(245, 245, 245) solid;}
	.geng2{width:100%;height:200px;position: fixed;bottom: 0px;background-color: #fff;z-index: 9999;}
	.geng{width:100%;height:100vh;position: fixed;top:0px;z-index: 9995;background-color: #000000;opacity: 0.7;}
	.shenhe{width:94%;padding: 10px 3%;line-height: 25px;color:#0562cb;border-bottom: 1px rgb(245, 245, 245) solid;}
	.cause{width:94%;padding: 10px 3%;line-height: 25px;color:red;border-bottom: 1px rgb(245, 245, 245) solid;}
	.fengcai .fccha{width:20px;height:20px;position: absolute;top:-5px;right:-5px;background-color: #fff;border-radius: 50%;}
	.fengcai .fcimg{width:80px;height:80px;}
	.fengcai{width:80px;height:80px;margin-right: 15px;position: relative;margin-bottom: 10px;float: left;}
	.zhuzhu{color:#b2b1b1;}
	.info7 textarea{width:100%;height:66px;line-height: 22px;font-size: 0.85rem;margin-bottom: 8px;}
	.info7{width:100%;overflow: hidden;}
	.info6{width:100;height:45px;line-height: 45px;}
	.info5{width:94%;padding: 0px 3%;border-bottom: 1px rgb(245, 245, 245) solid;}
	.genghuan{width:60px;height:25px;line-height: 25px;text-align: center;background-color: #05c160;color:#fff;border-radius: 3px;float: right;margin-top: 10px;margin-left: 5px;font-size: 0.75rem;}
	.input-value-border{border:0px!important;text-align: right;}
	.info3 picker{height:45px;line-height: 45px;}
	.info4{width:100%;height:40px;line-height: 40px;text-align: center;background-color: #05c160;color:#fff;position: fixed;bottom: 0px;z-index: 999;}
	.info3 image{width:65px;height:65px;margin-top: 7.5px;float: right;}
	.info3 input{width:100%;height:45px;font-size: 0.85rem;color:#333;}
	.info3{width:100%;height:45px;flex:1;}
	
	.info2 text{color:red;}
	.info2{width:100px;height:45px;line-height: 45px;margin-right: 5px;}
	.info{width:94%;padding: 0px 3%;display: flex;border-bottom: 1px rgb(245, 245, 245) solid;}
	.main{width:100%;}
</style>
